<template>
    <div>
        <md-popup
            v-model="isPopupShow"
            position="bottom"
        >
            <div class="popup-header">
                <p>{{title}}</p>
            </div>
            <div class="face-content">
            </div>
            <FaceRecognition
                ref="face"
                :system="system"
                :type="type"
                :businessType="businessType"
                :businessNo="businessNo"
                :userData="userData"
                :pmdCamera="pmdCamera"
                :uploadOss="uploadOss"
                :imageAttribute="imageAttribute"
                @initBack="initBack"
                @asyncBack="asyncBack"
                @syncBack="syncBack"
                @faceChange="faceChange"
            >
                <md-button class="popup-ok-button" type="primary">开始识别</md-button>
            </FaceRecognition>
        </md-popup>
        <md-input-item ref="num" title="业务号" v-model="businessNo" placeholder="请输入业务号" clearable is-title-latent>
        </md-input-item>
        <md-input-item ref="name" title="姓名" v-model="userName" placeholder="请输入姓名" clearable is-title-latent>
        </md-input-item>
        <md-input-item ref="id" title="身份证号" v-model="idNumber" placeholder="请输入身份证号" clearable is-title-latent>
        </md-input-item>
        <!-- <md-button class="popup-ok-button" type="primary" @click="recognition()">腾讯人脸识别读数</md-button> -->
        <md-button class="popup-ok-button" type="primary" @click="recognition4('腾讯人脸识别动作')">腾讯人脸识别动作</md-button>
        <md-button class="popup-ok-button" type="primary" @click="recognition1('自动检测人脸识别')">自动检测人脸识别</md-button>
        <md-button class="popup-ok-button" type="primary" @click="recognition2('wx使用h5人脸识别')">wx使用h5人脸识别</md-button>
        <md-button class="popup-ok-button" type="primary" @click="recognition3('oss人脸识别')">oss人脸识别</md-button>
    </div>
</template>

<script>
import FaceRecognition from '@/components/faceRecognition'
import {Popup, Button, Toast, InputItem} from 'mand-mobile'
import $customer from '@/api/customer'
import http from '@/utils/http'
import CryptoJS from 'crypto-js'
export default {
    components: {
        FaceRecognition,
        [Popup.name]: Popup,
        [Button.name]: Button,
        [Toast.name]: Toast,
        [InputItem.name]: InputItem
    },
    data() {
        return {
            isPopupShow: false,
            title: '',
            system: 'gh', // 系统类型
            type: 'xqwx', // 平台类型
            businessType: 'ORDINARY_FACE', // 业务类型  异步
            // system: 'gh', // 系统类型
            // type: 'xqwx', // 平台类型
            // businessType: 'ALICLOUDJR_TEST', // 业务类型  同步
            businessNo: '', // 业务号
            userName: '', // 姓名
            idNumber: '', // 身份证号
            userData: '', // 身份信息加密串
            imageAttribute: {
                width: 200,
                height: 200,
                quality: 0.8
            },
            pmdCamera: false, // 是否使用原生相机
            uploadOss: false, // 是否使用oss上传
            // faceCheckUrl: '', // 人脸验证地址
        }
    },
    mounted() {
        if(this.$route.query.imgUrl) {
            console.log(this.$route.query.imgUrl)
        }
    },
    methods: {
        // 腾讯人脸识别
        async recognition() {
            let userData = `${this.userName}_${this.idNumber}_${(new Date()).getTime()}`
            await http.get(`${process.env.VUE_APP_BASIS_URL}/userData/encrypt`,{userData: userData}).then(res => {
                console.log(res)
                this.userData = res.userData
            })
            this.system = 'gh', // 系统类型
            this.type = 'xqwx', // 平台类型
            this.businessType = 'ORDINARY_FACE_NUMBER', // 业务类型  异步
            this.$refs.face.init()
        },
        // 腾讯人脸识别
        async recognition4(val) {
            this.totalHand(val)
            let userData = `${this.userName}_${this.idNumber}_${(new Date()).getTime()}`
            await http.get(`${process.env.VUE_APP_BASIS_URL}/userData/encrypt`,{userData: userData}).then(res => {
                console.log(res)
                this.userData = res.userData
            })
            this.system = 'gh', // 系统类型
            this.type = 'xqwx', // 平台类型
            this.businessType = 'ORDINARY_FACE_NUMBER', // 业务类型  异步
            this.$refs.face.init()
        },
        // h5人脸识别
        async recognition1(val) {
            this.totalHand(val)
            let userData = `${this.userName}_${this.idNumber}_${(new Date()).getTime()}`
            await http.get(`${process.env.VUE_APP_BASIS_URL}/userData/encrypt`,{userData: userData}).then(res => {
                console.log(res)
                this.userData = res.userData
            })
            this.system = 'gh', // 系统类型
            this.type = 'xqwx', // 平台类型
            this.businessType = 'ALICLOUDJR_TEST', // 业务类型  异步
            this.$refs.face.init()
        },
        // wx人脸识别
        async recognition2(val) {
            this.totalHand(val)
            let userData = `${this.userName}_${this.idNumber}_${(new Date()).getTime()}`
            await http.get(`${process.env.VUE_APP_BASIS_URL}/userData/encrypt`,{userData: userData}).then(res => {
                console.log(res)
                this.userData = res.userData
            })
            this.system = 'gh', // 系统类型
            this.type = 'xqwx', // 平台类型
            this.businessType = 'ALICLOUDJR_TEST', // 业务类型  异步
            this.pmdCamera = true
            this.uploadOss = false
            this.$refs.face.init()
        },
        // oss人脸识别
        async recognition3(val) {
            this.totalHand(val)
            let userData = `${this.userName}_${this.idNumber}_${(new Date()).getTime()}`
            await http.get(`${process.env.VUE_APP_BASIS_URL}/userData/encrypt`,{userData: userData}).then(res => {
                console.log(res)
                this.userData = res.userData
            })
            this.system = 'gh', // 系统类型
            this.type = 'xqwx', // 平台类型
            this.businessType = 'ALICLOUDJR_TEST', // 业务类型  异步
            this.pmdCamera = true
            this.uploadOss = true
            this.$refs.face.init()
        },
        totalHand(val) {
            this.title = val
            // this.userName = ''
            // this.idNumber = ''
            // Toast.loading(`${val}初始化中...`,3000)
            // setTimeout(() => {
            //    Toast.info(`${val}初始化成功`) 
            // },4000)
        },
        // 初始化回调
        initBack(data) {
            console.log(data,'初始化回调')
            switch(data.code) {
                case '0':
                    this.isPopupShow = true
                break
                case 'R1002':
                    Toast.info('缺少入参，请补充数据')
                break
                case 'R1003':
                    Toast.info('验证次数超过限制')
                break
                default:
                    Toast.info('系统异常')
            }
        },
        // 异步成功回调
        asyncBack(data) {
            console.log(data, '异步成功回调')
            window.location.href = data.faceCheckUrl
        },
        // 同步成功回调
        syncBack(data) {
            console.log(data, '同步成功回调')
            // let datas = {
            //     system: this.system,
            //     type: this.type,
            //     businessType: this.businessType,
            //     businessNo: this.businessNo,
            //     mobile: '1231231'
            // }
            // this.$store.dispatch('setSsid', data.faceToken)
            // $customer.logines(datas).then(res => {
            //     console.log(res)
            // })
            Toast.info('人脸识别成功。')
        },
        // 人脸识别操作状态
        faceChange(data) {
            console.log(data, '人脸识别操作状态')
            switch(data.code) {
                case '1':
                case '2':
                case 'R1001':
                case 'R1002':
                case 'R1003':
                case 'R1006':
                case 'R1009':
                case 'E9003':
                case 'E9004': 
                    Toast.info(data.message)
                break
                case '5':
                case '6':
                    Toast.loading(data.message,0, false)
                break
            }
        }
    }
}
</script>

<style lang="less" scoped>
    /deep/.md-field-item {
        margin: 20px;
    }
    /deep/ .md-popup-box {
        padding-top: 50px;
        border-radius: 20px 20px 0 0;
        background: #ffffff;
        .popup-header {
            position: relative;
            width: 100%;
            height: 45px;
            p {
                width: 100%;
                margin: 0;
                line-height: 45px;
                font-size: 32px;
                font-family: PingFangSC-Medium,PingFang SC;
                font-weight: 500;
                color: rgba(0,0,0,1);
                text-align: center;
            }
        }
        .face-content {
            width: 100%;
            height: 600px;
        }
        .popup-ok-button {
            width: 100%;
        }
    }
</style>
